<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <div th:replace="admin/head :: head"></div>

    <title>用户列表</title>

    <!-- jquery.pagination -->
    <script th:src="${#request.getAttribute('ctx') + '/static/common/jquery.pagination/jquery.pagination.js'}"></script>


</head>

<body>
<div class="x-nav">
      <span class="layui-breadcrumb">
        <a th:href="@{/admin}">首页</a>
        <a>
          <cite>用户列表</cite>
        </a>
      </span>
</div>
<div class="x-body">
    <div class="layui-row">
        <form class="layui-form layui-col-md12 x-so" th:action="@{/admin/user/list}" method="post" id="searchForm">
            <input type="text" name="id" th:value="${user.id}" placeholder="请输入用户ID" autocomplete="off" class="layui-input">
            <input type="text" name="account" th:value="${user.account}" placeholder="请输入用户账号" autocomplete="off" class="layui-input">
            <input type="text" name="nickname" th:value="${user.nickname}" placeholder="请输入用户昵称" autocomplete="off" class="layui-input">
            <input type="text" name="mobile" th:value="${user.mobile}" placeholder="请输入用户手机" autocomplete="off" class="layui-input">

            <div class="layui-input-inline">
                <select name="filtrates">
                    <option value="">请选择用户显示位置</option>
                    <option value="1" th:selected="${user.filtrates ne null and user.filtrates.length > 0 and user.filtrates[0] eq 1}">首页</option>
                </select>
            </div>

            <div class="layui-input-inline">
                <select name="roles[0].id">
                    <option value="">请选择用户角色</option>
                    <option th:each="item, index:${roleList}" th:value="${item.id}" th:text="${item.description}" th:selected="${user.roles ne null and user.roles.size() > 0 and user.roles.get(0).id eq item.id}"></option>
                </select>
            </div>
            <button class="layui-btn" lay-submit="" lay-filter="sreach"><i class="layui-icon">&#xe615;</i></button>
        </form>
    </div>
    <xblock>
        <button class="layui-btn layui-btn-danger" onclick="del('/admin/user/delete/')"><i class="layui-icon"></i>批量删除
        </button>
        <button class="layui-btn" onclick="x_admin_show('添加用户','/admin/user/form')"><i class="layui-icon"></i>添加
        </button>
        <a class="layui-btn layui-btn-small" href="javascript:location.replace(location.href);" title="刷新">
            <i class="layui-icon">ဂ</i>
        </a>
        <span class="x-right" style="line-height:40px" th:text="|共有数据: ${page.total} 条|"></span>
    </xblock>
    <table class="layui-table">
        <thead>
        <tr>
            <th>
                <div class="layui-unselect header layui-form-checkbox" lay-skin="primary"><i
                        class="layui-icon">&#xe605;</i></div>
            </th>
            <th>用户ID</th>
            <th>账号</th>
            <th>昵称</th>
            <th>性别</th>
            <th>手机</th>
            <th>Email</th>
            <th>创建时间</th>
            <th>排序</th>
            <th>首页显示</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <tr th:each="item:${page.list}">
            <td>
                <div class="layui-unselect layui-form-checkbox" lay-skin="primary" th:attr="data-id=${item.id}"><i
                        class="layui-icon">&#xe605;</i>
                </div>
            </td>
            <td th:text="${item.id}"></td>
            <td th:text="${item.account}"></td>
            <td th:text="${item.nickname}"></td>
            <td cus:dict="gender, ${item.gender}"></td>
            <td th:text="${item.mobile}"></td>
            <td th:text="${item.email}"></td>
            <td th:text="${#dates.format(item.createDate, 'yyyy-MM-dd HH:mm:ss')}"></td>
            <td th:text="${item.order}"></td>
            <td>
                <form class="layui-form">
                    <input type="checkbox" lay-filter="change" lay-skin="switch" th:checked="${item.filtrate ne null and item.filtrate.indexOf('1') > -1}" th:value="${item.filtrate}" th:attr="id=${item.id}">
                </form>
            </td>
            <td class="td-manage">
                <a title="查看" th:onclick="'x_admin_show(\'编辑\',\'/admin/user/form?id=' + ${item.id} + '\')'"
                   href="javascript:;">
                    <i class="layui-icon">&#xe63c;</i>
                </a>
                <a title="删除" th:onclick="'del(\'/admin/user/delete/\', ' + ${item.id} + ', \'该操作会同时删除该用户发布的作品, 是否确定?\')'" href="javascript:;">
                    <i class="layui-icon">&#xe640;</i>
                </a>
            </td>
        </tr>
        </tbody>
    </table>
    <div class="page">
        <div class="page-box"></div>
    </div>

</div>
<script th:inline="javascript">
    $('.page-box').pagination({
        totalData: [[${page.total}]],
        showData: [[${page.pageSize}]],
        current: [[${page.pageNum}]],
        pageCount: [[${page.pages}]],
        coping: true,
        keepShowPN: true,
        callback: function (index) {
            $('#searchForm').attr('action', location.href.substring(0, location.href.indexOf('?') < 0 ? location.href.length : location.href.indexOf('?')) + "?pageNum=" + index.getCurrent() + "&pageSize=[[${page.pageSize}]]");
            $('#searchForm').submit();
        }
    });
    layui.use('form', function () {
        var form = layui.form;
        
        form.on('submit(search)', function (data) {
            this.submit();
        })

        /**
         * 改变首页显示设置
         */
        form.on('switch(change)', function(data) {
            var self = this;
            self.excute = function(id, filtrate) {
                $.ajax({
                    type: 'post',
                    url: '/admin/user/change_show',
                    data: {
                        id: id,
                        filtrate: filtrate
                    },
                    dataType: 'json',
                    beforeSend: function(xhr) {
                        xhr.setRequestHeader($("meta[name='_csrf_header']").attr("content"), $("meta[name='_csrf']").attr("content"));
                        self.disabled = true;
                    },
                    success: function(result) {
                        if(result.status == 200) {
                            layer.msg(Messages.SUCCESS, {icon: 6, time: 3000});
                        } else {
                            layer.alert(result.error == null || result.error == undefined ? Messages.ERROR : result.error, {icon: 1});
                            return false;
                        }
                    },
                    error: function(e) {
                        layer.alert(Messages.ERROR, {icon: 1});
                    }
                })
                self.disabled = false;
            }

            var id = $(self).attr('id');
            var filtrate = self.value;

            if(self.checked) {
                if(filtrate != null && filtrate != '') {
                    if(filtrate.indexOf('1') > -1) {
                        return false;
                    } else {
                        let arr = new Array();
                        arr.push(1);
                        for(var i in filtrate.split(',')) {
                            arr.push(filtrate.split(',')[i]);
                        }
                        self.value = arr.toString();
                        self.excute(id, arr.toString());
                        return true;
                    }
                } else {
                    let arr = new Array();
                    arr.push(1);
                    self.value = arr.toString();
                    self.excute(id, arr.toString());
                    return true;
                }
            } else {
                if(filtrate != null && filtrate != '') {
                    if(filtrate.indexOf('1') > -1) {
                        let arr = new Array();
                        for(var i in filtrate.split(',')) {
                            if(filtrate.split(',')[i] != '1') {
                                arr.push(filtrate.split(',')[i]);
                            }
                        }
                        self.value = arr.toString();
                        self.excute(id, arr.toString());
                        return true;
                    } else {
                        return true;
                    }

                } else {
                    return true;
                }
            }
        })

    });
</script>
</body>

</html>